<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Vue</title>
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
  <layout>
    <h1 slot="header">头部标题</h1>

    <p>主体内容的一个段落。</p>

    <p slot="footer">尾部版权信息</p>
  </layout>
</div>
<script>
  // 全局注册组件
  Vue.component('layout', {
    template: '<div class="container">' +
    '    <header>' +
    '      <slot name="header"></slot>' +
    '    </header>' +
    '    <main>' +
    '      <slot></slot>' +
    '    </main>' +
    '    <footer>' +
    '      <slot name="footer"></slot>' +
    '    </footer>' +
    '  </div>'
  })

  // 创建根实例
  new Vue({
    el: '#app'
  })
</script>
</body>
</html>